<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>Three.js Test</title>
  <style type="text/css">
    div#canvas3d{
      border: none;
      /*cursor: move;*/
      width: 1400px;
      height: 600px;
      /*background-color: #EEEEEE;*/
    }
  </style>
  <script src="../_libs/Three.js"></script>
  <script type="text/javascript">
    //开启Three.js渲染器
    var renderer;//声明全局变量（对象）
    function initThree() {
      width = document.getElementById('canvas3d').clientWidth;//获取画布「canvas3d」的宽
      height = document.getElementById('canvas3d').clientHeight;//获取画布「canvas3d」的高
      renderer=new THREE.WebGLRenderer({antialias:true, 'alpha': true});//生成渲染器对象（属性：抗锯齿效果为设置有效）
      //renderer=new THREE.CanvasRenderer({antialias:true});//生成渲染器对象（属性：抗锯齿效果为设置有效）
      //renderer=new THREE.SVGRenderer({antialias:true});//生成渲染器对象（属性：抗锯齿效果为设置有效）
      //renderer=new THREE.DOMRenderer({antialias:true})
      renderer.setSize(width, height );//指定渲染器的高宽（和画布框大小一致）
      //renderer.setClearColorHex(0xFFFFFF, 1.0);//设置canvas背景色(clearColor)
      //renderer.setClearColorHex(0x0000ff, 1.0);
      //console.log(renderer.getClearColor(), renderer.getClearAlpha());
      document.getElementById('canvas3d').appendChild(renderer.domElement);//追加 【canvas】 元素到 【canvas3d】 元素中。
    }
    //设置相机
    var camera;
    function initCamera() {
      camera = new THREE.PerspectiveCamera( 45, width / height , 1 , 5000 );//设置透视投影的相机,默认情况下相机的上方向为Y轴，右方向为X轴，沿着Z轴朝里（视野角：fov 纵横比：aspect 相机离视体积最近的距离：near 相机离视体积最远的距离：far）
      camera.position.x = 0;//设置相机的位置坐标
      camera.position.y = 50;//设置相机的位置坐标
      camera.position.z = 100;//设置相机的位置坐标
      camera.up.x = 0;//设置相机的上为「x」轴方向
      camera.up.y = 1;//设置相机的上为「y」轴方向
      camera.up.z = 0;//设置相机的上为「z」轴方向
      camera.lookAt( {x:0, y:0, z:0 } );//设置视野的中心坐标
    }
    //设置场景
    var scene;
    function initScene() {
      scene = new THREE.Scene();
    }

    //设置光源
    var light;
    function initLight() {
      light = new THREE.DirectionalLight(0xff0000, 1.0, 0);//设置平行光源
      light.position.set( 200, 200, 200 );//设置光源向量
      scene.add(light);// 追加光源到场景
    }
    //设置物体
    var sphere;
    function initObject(){
      sphere = new THREE.Mesh(
        new THREE.SphereGeometry(20,20),                //width,height,depth
        new THREE.MeshLambertMaterial({color: 0xff0000}) //材质设定
      );
      scene.add(sphere);
      sphere.position.set(0,0,0);
    }
    //执行
    function threeStart() {
      initThree();
      initCamera();
      initScene();
      initLight();
      initObject();
      //renderer.clear();
      renderer.render(scene, camera);
    }
  </script>
</head>
<body onload='threeStart();'>
  <div id="canvas3d"></div>
</body>
</html>